<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>The home of bookworm</title>
    <link href="style/index.css" rel="stylesheet" type="text/css">
</head>

<body>
<div id="wrapper">
    <div id="top">
        <div class="content">
            <a href="jsps/user/index.jsp">进入购物系统</a>
        </div>
    </div>

    <div id="header">
        <div id="title">
            <h1>书虫之家</h1>
        </div>
        <div id="search">
            <form action="#" method="get">
                <input type="text" id="input" name="keyword" value="请输入你要查找的书籍" class="txt"
                       onfocus="focus1();"
                       onblur="blur1();">
                <input type="submit" name="search" value="搜索" class="submit">
            </form>
        </div>
    </div>

    <div id="menu">
        <ul>
            <li><a href="index.html" class="selected">首页</a></li>
            <li><a href="#">书城中心</a></li>
            <li><a href="rank.html">畅销榜单</a></li>
            <li><a href="#">阅读社区</a></li>
            <li><a href="about.html">关于我们</a></li>
            <li><a href="problems.html">常见问题</a></li>
        </ul>
    </div>


    <div id="container">
        <div id="main">
            <div id="sidebar" class="float_l">
                <div class="sidebar_box">
                    <h2>分类</h2>
                    <div class="content">
                        <ul class="sidebar_list">
                            <li><a href="novels.html">小说</a></li>
                            <li><a href="#">文学</a></li>
                            <li><a href="#">青春文学</a></li>
                            <li><a href="#">传记</a></li>
                            <li><a href="#">成功励志</a></li>
                            <li><a href="#">管理</a></li>
                            <li><a href="#">历史</a></li>
                            <li><a href="#">哲学宗教</a></li>
                        </ul>
                    </div>
                </div>

                <div class="sidebar_box">
                    <h3>新书上架</h3>
                    <div class="box_d">
                        <a href="1984.html"><img src="img/1984.jpg" alt="1984"></a>
                        <h4><a href="1984.html">1984</a></h4><h5>[英]乔治·奥威尔</h5>
                        <div class="cleaner"></div>
                    </div>
                    <div class="box_d">
                        <a href="#"><img src="img/renjianshige.jpg" alt="人间失格"></a>
                        <h4><a href="#">人间失格</a></h4><h5>[日]太宰治</h5>
                        <div class="cleaner"></div>
                    </div>
                    <div class="box_d">
                        <a href="#"><img src="img/huozhe.jpg" alt="活着"></a>
                        <h4><a href="#">活着</a></h4><h5>[中]余华</h5>
                        <div class="cleaner"></div>
                    </div>
                </div>
            </div>

            <div id="content" class="float_r">
                <div id="slider-wrapper">
                    <iframe frameborder="0" width="670" height="350" src="slider.html"></iframe>
                </div>

                <h1>书虫之家</h1>
                <p>这里是书虫之家，欢迎来到书虫之家，在这里你可以在商城购买书籍，也可以在社区论坛分享阅读收获和体验。</p>

                <div class="box_l">
                    <h3>经营特色</h3>
                    <p>
                        书虫之家致力于打造一个舒适的阅读环境。这里不仅只是网络商城，也是社群平台，您可以在这里购买自己想要的书籍，也可以浏览论坛，与其他书友互动交流。</p>
                    <ul>
                        <li><a href="#">购买书籍</a></li>
                        <li><a href="#">分享论坛</a></li>
                        <li><a href="#">二手交易</a></li>
                    </ul>
                </div>

                <div class="box_r">
                    <h3>发展规划</h3>
                    <p>
                        书虫之家致力于提供优质的书籍服务，主要内容有书籍出售、书籍分享论坛。您可以在这里选购书籍，也可以和其他书友共同分享阅读体会，增进交流。</p>
                    <div class="button"><a href="#">更多</a></div>
                </div>
            </div>
            <div class="cleaner"></div>
        </div>

        <div id="footer">
            Copyright &copy; 2019书虫之家 All Rights Reserved
        </div>
    </div>
</div>

<script type="text/javascript">
    function focus1() {
        var input1 = document.getElementById("input");
        input1.value = "";
    }

    function blur1() {
        var input1 = document.getElementById("input");
        input1.value = "请输入你要查找的书籍";
    }
</script>
</body>
</html>
